<template>
  <div class="im">
    <div class="im-header displayFlex flex-algin-center">
      <img
        @click="openHKHWConfirm('好看好玩支持查看哪些用户关注了你/可以获取更多商家优惠/支持搜索功能/支持更多扩展功能')"
        class="header-icon"
        src="../../assets/images/im/linkman_icon.png"
        alt=""
      >
      <img
        @click="openHKHWConfirm('好看好玩支持查看哪些用户关注了你/可以获取更多商家优惠/支持搜索功能/支持更多扩展功能')"
        class="header-icon"
        src="../../assets/images/im/shoper_icon.png"
        alt=""
      >
      <span class="flex1 displayFlex search-winput flex-algin-center">
        <img
          @click="openHKHWConfirm('好看好玩支持查看哪些用户关注了你/可以获取更多商家优惠/支持搜索功能/支持更多扩展功能')"
          class="search-icon"
          src="../../assets/images/im/serch_icon.png"
          alt=""
        >
        <span
          class="search-input flex1"
          @click="openHKHWConfirm('好看好玩支持查看哪些用户关注了你/可以获取更多商家优惠/支持搜索功能/支持更多扩展功能')"
        >请输入搜索内容</span>
      </span>
      <img
        @click="openHKHWConfirm('好看好玩支持查看哪些用户关注了你/可以获取更多商家优惠/支持搜索功能/支持更多扩展功能')"
        class="header-icon mr-0"
        src="../../assets/images/im/more_icon.png"
        alt=""
      >
    </div>
    <no-data v-if="sessionList && sessionList.length == 0"></no-data>
    <ul
      v-else-if="sessionList  && sessionList.length > 0"
      class="im-list"
    >
      <li v-for="(value,key) in sessionList" :key="key">
        <router-link
          class="displayFlex im-list-item"
          :to="{path:'/im/chat',query:{'chatGroupId':value.to,'scene':value.scene,'from':value.from}}"
        >
          <span class="displayFlex positionR">
            <!--<img v-if="value.type == 0" class="im-list-userheader" :src="value.logo" alt="">-->
            <img
              class="im-list-userheader"
              :src="value.datas.photo"
              alt=""
            >
            <!-- <img
              v-else-if="value.type && value.type == 1"
              class="im-list-userheader"
              src="../../assets/images/im/im_like.png"
              alt=""
            > -->
            <!--没做推送之前这里都是没用的-->
            <span
              v-if="false"
              class="branches-num"
            >{{10 > 9 ? '9+' : 9}}</span>
          </span>
          <span class="flex1 im-list-cContent">
            <span class="displayFlex im-list-wusername">
              <span class="im-list-username flex1">{{value.datas.groupName}}</span>
              <span
                class="im-list-time"
               
              >{{changeTime(value.time)}}</span>
            </span>
            <span class="displayFlex">
              <!--//消息类型（0文本消息 1图片 2语音 3视频 4地理位置 5红包 6转账)-->
              <span v-if="value.type == 'text'"
                class="im-list-comment flex1 positionR displayFlex flex-algin-center"
              >
                {{value.text}}
                <!--语音icon-->
                <!--<img v-if="false" class="play-vioce" src="../../assets/images/im/play_vioce_icon.png" alt="">-->
              </span>
              <span v-else-if="value.type == 'image'">
                [图片]
              </span>
              <span v-else-if="value.type == 'audio'">
                [语音]
              </span>
              <span v-else-if="value.type == 'video'">
                [视频]
              </span>
              <span v-else-if="value.type == 'geo'">
                [地理位置]
              </span>
              <!-- <span v-else-if="value.list[value.list.length - 1].content.messageType == 5">
                [收到一个红包]
              </span>
              <span v-else-if="value.list[value.list.length - 1].content.messageType == 6">
                [收到一笔转账]
              </span> -->
            </span>
          </span>
        </router-link>
      </li>
      <!--TODO 这一块待开发，这个板块不重要，这个是通知板块，评论和点赞-->
      <li
        class="displayFlex im-list-item"
        @click="toHaoKanHaoWan"
        v-if="false"
      >
        <span class="displayFlex positionR">
          <img
            v-if="false"
            class="im-list-userheader"
            src="../../assets/images/im/more_icon.png"
            alt=""
          >
          <img
            class="im-list-userheader"
            src="../../assets/images/im/im_like.png"
            alt=""
          >
          <span
            v-if="false"
            class="branches-num branches-num-small"
          ></span>
        </span>
        <span class="flex1 im-list-cContent">
          <span class="displayFlex im-list-wusername">
            <span class="im-list-username flex1">评论通知</span>
            <span class="im-list-time">刚刚</span>
          </span>
          <span class="displayFlex">
            <span class="im-list-comment flex1 positionR displayFlex flex-algin-center">
              有人回复/点赞了你的评论下载【好看好玩】查看详情
            </span>
            <span
              v-if="false"
              class="im-list-icons displayFlex flex-algin-center"
            >
              <img
                class="im-list-icon"
                src="../../assets/images/im/voice_icon.png"
                alt=""
              >
              <img
                class="im-list-icon"
                src="../../assets/images/im/orange_camera_icon.png"
                alt=""
              >
            </span>
          </span>
        </span>
      </li>
    </ul>
    <wx-hide-menu></wx-hide-menu>
  </div>
</template>

<script>
export default {
  name: "Im",
  data() {
    return {
     
      num: 20 //未读消息的条数
    };
  },
  created() {
    /*没有登录要先登录*/
    if (!this.userId) {
      this.$router.push("/to/login");
      return;
    }
  },
  computed: {
    sessionList() {
      return this.$store.state.logic.sessionList;
    },
  },
  mounted() {
  },
  methods: {
  },
  components: {
    "no-data": () => import("../../components/commonActModel/noData/NoData"),
    "wx-hide-menu": () => import("../../components/wx/WxHideMenu")
  }
};
</script>

<style scoped>
.im /deep/ .no-wcomment {
  z-index: 1;
}
.im {
  padding: 0.15rem;
  height: 6.67rem;
  height: 100vh;
  overflow: hidden;
}
.im-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 0.15rem;
}
.header-icon {
  width: 0.2rem;
  height: 0.2rem;
  margin-right: 0.2rem;
}
.search-winput {
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  background-color: #f5f5f5;
  margin-right: 0.2rem;
  height: 0.28rem;
  padding: 0 0.1rem;
}
.search-input {
  width: 100%;
  font-size: 0.13rem;
  color: #999999;
  height: 0.2rem;
  line-height: 0.22rem;
  background-color: transparent;
}
.search-icon {
  width: 0.13rem;
  height: 0.13rem;
  margin-right: 0.1rem;
}
.im-list-userheader {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-right: 0.1rem;
}
.branches-num {
  display: inline-block;
  position: absolute;
  width: 0.16rem;
  height: 0.16rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  right: 0.1rem;
  top: 0;
  background-color: #ff3333;
  color: #fff;
  white-space: nowrap;
  font-size: 0.1rem;
  text-align: center;
  line-height: 0.16rem;
}
.branches-num-small {
  width: 0.05rem;
  height: 0.05rem;
}
.im-list {
  margin-top: 0.41rem;
  overflow-y: auto;
  height: 100%;
}
.im-list-item {
  padding-top: 0.17rem;
  
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.im-list-username {
  font-size: 0.16rem;
  color: #333;
}
.im-list-time {
  font-size: 0.1rem;
  color: #999;
}
.im-list-comment {
  font-size: 0.14rem;
  color: #666;
  max-width: 100%;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-right: 0.3rem;
}
.im-list-wusername {
  padding-bottom: 0.07rem;
}
.im-list-icon {
  width: 0.2rem;
  height: 0.2rem;
}
.im-list-icon:first-of-type {
  margin-right: 0.2rem;
}
.im-list-cContent {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 0.2rem;
}
.play-vioce {
  width: 0.15rem;
  height: 0.15rem;
}
</style>